<template>
	<view class="container">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<f-navbar :title="$t('order')" navbarType='2' @leftClick="$tools.goJump('/pages/my/myInfo',{},'','tab')"></f-navbar>
		<view class="ordertab">
 			<u-tabs
				:list="tabslist"
				:scrollable="false"
				:current="tabscurrent">
			</u-tabs>
		</view>
		<!--u-gap height="10" bgColor="#F1F8FA"></u-gap-->
		<u-empty :text="$t('nologin')" mode="data"  icon="https://i.yodin.com/storage/empty/permission.png" :show="!userInfo.token"></u-empty>
		<u-empty :text="$t('nodata')"  mode="data"  icon="https://i.yodin.com/storage/empty/order.png" :show="loadstatus == false&&userInfo.token&&flow_list.length === 0"></u-empty>
		<view class="u-padding-20">
			
			
			
		  <view class="base-panel-box u-padding-20 ordertab u-m-b-20"  v-for="(item, index) in flow_list" :key="index" v-if="userInfo.token">
			<view class="u-flex u-flex-between u-p-b-20 u-m-b-20 b-b">
				<view>{{ item.order_code }}</view>
				<view class="u-error-dark u-p-l-20">{{ $tools.dateFormat('YYYY-mm-dd HH:MM',item.add_time) }}</view>
				<view class="u-flex-3 u-flex u-flex-end"><u-tag :text="item.order_status_txt" :type="item.order_status_type" plain shape="circle" ></u-tag></view>
			</view>	 	

			  <view class="u-flex-col u-p-b-20 u-m-b-20 b-b">
				  <view class="u-flex u-flex-between">
					  <view class="u-flex-9 u-line-1">{{ item.address }}</view>
				  </view>
				<view class="u-flex u-flex-between">
					<view class="u-flex-col" style="line-height: 130%;">{{ orderGoodsName(item.detailed) }}</view>
					<view class="text-right">
						<text class="u-font-20 price">{{item.symbol}}</text><text class="u-font-lg price">{{ item.need_totalmoney }}</text>
					</view>
				</view>
				
			  </view>
			<view class="u-flex u-flex-middle" @tap="$tools.goJump('/pagesPackageA/order/detail',{ order_code: item.order_code },'','')">
				<!--u--text :text="$t('details_btn')" align="center"/-->
				<view class="u-flex-6 u-text-center">查看详细</view>
				<view class="u-flex-6 u-text-center" v-if="item.replay_is">
					<span class=" u-text-center" style="position: relative;color:seagreen" v-if="item.replay_status==false">可点评
					<i style="position: absolute;width: 8px;height: 8px; background:limegreen; border-radius: 100%; top:-2px;right:-10px"></i></span>
					<span v-if="item.replay_status==true" style="color:darkgray">已点评</span>
				</view>
				<!--text :text="item.replay_status==false?'可点评':'已点评'" align="center" v-if="item.replay_is"/-->
				

			</view>
		  </view>
			
			


			
		

		<u-loadmore v-if="flow_list.length > 0" nomoreText="End" color="#dddddd" marginBottom="50" marginTop="50" :status="loadStatus" @loadmore="getOrders" line></u-loadmore>
			<u-gap height="40"></u-gap>
		</view>
		
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	import { setPay } from "@/config/pay";
	import fNavbar from '@/components/module/f-navbar/f-navbar';
	import { api_order_list,api_order_view,api_order_log_add,api_order_del } from '@/config/api.js';
	export default {
    components:{
        fNavbar
    },
		data() {
			return {
				page: 1,
				pageSize: 5,
				flow_list: [],
				loadstatus:false,
				loadStatus: 'loadmore',
				pay_coininfo_id: '',
				tabscurrent: 0,
				tabslist: [
					{name: this.$t('all')},
					{name: this.$t('paid')},
					{name: this.$t('received')},
					{name: this.$t('ordersales')}
				],
				tabactivestyle: {},
			}
		},
		computed: {
			...mapState(["userInfo"]),
			orderGoodsName() {
				return (order_detailed) => {
					let arr = []
					order_detailed.forEach(order_detailed => arr.push(order_detailed.goods_name + ' '+order_detailed.property+' * ' + order_detailed.num))
					return arr.join('，')
				}
			}
		},
		async onLoad() {
			await this.getOrders(false)
		},
		async onReachBottom() {
			if (this.loadStatus=='loadmore'){
				await this.getOrders(false)
			}
		},
		async onPullDownRefresh() {
			await this.getOrders(true)
		},
		methods: {
			async getOrders(isRefresh = false) {
				let orders = await this.getOrderList();
			},
			
		deleteOrder(code){
			api_order_del({
					order_code:code,
			}).then(res => {
				this.page=1;
				this.flow_list=[];
				this.getOrderList();
			}).catch((e)=>{});
		},
		// 页面数据
		getOrderList() {
			this.loadstatus=true;
            api_order_list({
				p:this.page,
				limit:10,
				type:'group'
			}).then(res => {
				console.log('res',res)
					this.loadstatus = false;
					if (res.count > 0) {
						if (this.page <= res.pages) {
							res.list.map((item) => {
								this.flow_list.push(item);
							})
							if (this.page==res.pages)this.loadStatus = "nomore";
							this.page += 1;
						} else {
							this.loadStatus = "nomore";
						}
					}
            }).catch((e)=>{});
		},
			

		}
	}
</script>

<style lang="scss" scoped>
	
/deep/ uni-page-body,page,body,.container {
  background: #f5f5f5;
  min-height:calc(100vh - var(--status-bar-height));
}

.ordertab{
	background: #ffffff;
	border-bottom: solid 1px #eee;
}

</style>
